<script>
import { dialog } from "popover-func-element-ui";
import parse from "@/views/pageViewer/parse/parse";
import CircularJSON from "circular-json";

export default {
  name: "AegleButton",
  props: {
    schema: {
      type: Object,
      default: null,
    },
  },
  computed: {
    style() {
      return (
        (this.schema && this.schema.props && this.schema.props.style) || {}
      );
    },
  },
  data() {
    return {
      list: [],
    };
  },
  render() {
    if (this.schema) {
      const events = this.schema.events;
      const fns = events.map(({ eventName, eventType, componentId }) => {
        return () => {
          const lowCode = localStorage.getItem("dialog-list");
          const list = lowCode ? CircularJSON.parse(lowCode) : [];
          const componentSchema = list.find((item) => item.id === "aegle-form_1680161174092");
          if (eventType == "openDialog") {
            dialog(parse, {}, { list: [componentSchema],styleData: {height: "200px"} });
          }
        };
      });
      if(this.list.length> 0) {
        return (<parse list={this.list} />)
      }
      
      return (
        <el-button
          props={{ ...this.schema.props }}
          style={{ ...this.style }}
          onClick={() => {
            fns.forEach(fn => {
              fn()
            });
          }}
        >
          {this.$slots.default || this.schema.scopedSlots.default}
        </el-button>
      );
    }
  },
};
</script>